<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center justify-between">
      <div>
        <el-button class="mr-4" type="primary" @click="handleAdd">添加</el-button>
        <el-button class="mr-4" type="primary" @click="handleJump">操作记录</el-button>
      </div>
      
      <div class="flex items-center justify-between">
          <span class="mr-4 block w-72">用户昵称：</span>
          <el-input class="w-60 mr-4" v-model="listQuery.nickname" placeholder="用户昵称"></el-input>
          <span class="mr-4 block w-72">用户编号：</span>
          <el-input class="w-60 mr-4" v-model="listQuery.user_code" placeholder="用户编号"></el-input>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </div>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="序号" prop="id"/>
      <el-table-column label="用户ID" prop="user_id" />
      <el-table-column label="用户编号" prop="user_code" />
      <el-table-column label="用户昵称" prop="nickname"/>
      <el-table-column label="性别" prop="sex">
        <template slot-scope="scoped">
          <el-tag v-if="scoped.row.sex === 1" type="primary">男</el-tag>
          <el-tag v-if="scoped.row.sex === 2" type="primary">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所在公会" prop="sociatyName"/>
      <el-table-column label="M豆" prop="user_coin"/>
      <el-table-column label="收益" prop="user_income"/>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleRecharge(row)">充值</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" @click="handleRefuseM(row)">清空M豆</el-button>
          <el-button type="text" @click="handleRefuseI(row)">清空收益</el-button>
          <el-button type="text" @click="handleRefuseB(row)">清空背包</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="initData"
    />

    <!-- 添加白名单 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible="addDialog"
      lock-scroll
      title="添加"
      width="30%"
      @close="addDialog = false"
    >
      <div class="flex items-center">
        <p class="mr-4 w-20">用户编号:</p>
        <el-input v-model="user_code" placeholder="请输入用户编号" />
      </div>

      <section slot="footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="handleChecked(user_code)">确定</el-button>
      </section>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible="addDialog2"
      lock-scroll
      title="添加确定"
      width="30%"
      @close="addDialog2 = false"
    >
      <div class="flex items-center mb-4">
        <p class="mr-4 w-20">用户编号:</p>
        <el-input v-model="user_code" placeholder="" disabled />
      </div>
      <div class="flex items-center">
        <p class="mr-4 w-20">用户昵称:</p>
        <el-input v-model="nickname" placeholder="" disabled />
      </div>

      <section slot="footer">
        <el-button @click="addDialog2 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit(row)">确定</el-button>
      </section>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible="rechargeDialog"
      lock-scroll
      title="充值"
      width="30%"
      @close="rechargeDialog = false"
    >
      <el-form :model="rechargForm" ref="form" :rules="rules" label-width="100px" :inline="false" size="normal">
        <el-form-item label="充值金额" prop="money">
          <el-input v-model="rechargForm.money"></el-input>
        </el-form-item>
        <el-form-item label="充值类型" prop="type">
          <el-radio-group v-model="rechargForm.type">
            <el-radio :label="1">余额</el-radio>
            <el-radio :label="2">收益</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="describe">
          <el-input type="textarea" v-model="rechargForm.describe" resize="none"></el-input>
        </el-form-item>
      </el-form>

      <section slot="footer">
        <el-button @click="rechargeDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRecharge()">确定</el-button>
      </section>
    </el-dialog>

  </el-card>
</template>

<script>
import {
  whiteListData,
  userWhite,
  clearEarnings,
  whiteRecharge,
  clearRecharge,
  clearBagGift,
  whiteClear
} from '@/api/member/whiteList'
import {
  listData,
} from '@/api/member/listUsers'

export default {
  data() {
    return {
      tableList: [],
      user_code: '',
      nickname: '',
      dateList: undefined,
      listQuery: {
        user_code: '',
        nickname: '',
        page: 1,
        perPage: 10,
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 1,
      rechargForm: {
        money: '',
        type: 1,
        describe: '',
        user_id: ''
      },
      rules: {
        money: [
          { required: true, message: '请输入充值金额', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择充值类型', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      /* 弹出框开关 */
      addDialog: false,
      addDialog2: false,
      rechargeDialog: false,

      rejectLoading: false,
      passLoading: false,
      id: '',
      // 拒绝原因
      reject_reason: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleAdd() {
      this.addDialog = true
    },
    handleJump() {
      this.$router.push({
          path: 'operatingRecord',
      })
    },
    handleSearch() {
      this.listQuery.page = 1
      this.initData()
    },
    handleReset() {
      this.listQuery = {
        user_code: '',
        nickname: '',
        page: 1,
        perPage: 10,
      }
      this.initData()
    },
    async initData() {
      try {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        const { data } = await whiteListData(this.listQuery)
        this.listQuery.page = data.meta.page
        this.total = data.meta.total
        this.tableList = data.list
      } catch (e) {
        console.error(e)
      }
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除白名单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { code, data} = await whiteClear({
          id: String(row.id)
        })
        if(code === 200) {

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async handleRefuseM(row) {
      this.$confirm('是否清空M豆?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { code, data} = await clearRecharge({
          user_id: row.user_id
        })
        if(code === 200) {
          this.$message({
            type: 'success',
            message: 'M豆已清空!'
          });
          this.initData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    async handleRefuseI(row) {
      this.$confirm('是否清空收益?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const { code, data} = await clearEarnings({
          user_id: row.user_id
        })
        if(code === 200) {
          this.$message({
            type: 'success',
            message: '收益已清空!'
          });
          this.initData()
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    async handleRefuseB(row) {
      this.$confirm('是否清空背包?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const { code, data} = await clearBagGift({
          user_id: row.user_id
        })
        if(code === 200) {
          this.$message({
            type: 'success',
            message: '背包已清空!'
          });
          this.initData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    
    async handleChecked() {
      if (!this.user_code.trim()) {
        return void this.$message.warning('请填写用户编号！')
      }
      let data = {
        user_code: this.user_code,
        page: 1
      }
      listData(data).then(res => {
        if (res.data) {
          this.addDialog = false
          this.addDialog2 = true
          this.nickname = res.data.list[0].nickname
          this.user_code = res.data.list[0].user_code
        }
      }).finally(() => this.rejectLoading = false)
    },
    onSubmit() {
      userWhite({
        user_code: this.user_code
      }).then(res => {
        if(res.code === 200) {
          this.initData()
          this.addDialog2 = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    },
    handleRecharge(row) {
      console.log(row)
      this.rechargeDialog = true
      this.rechargForm.user_id = row.user_id
    },
    handleSubmitRecharge() {
      whiteRecharge(this.rechargForm).then(res => {
        if(res.code === 200) {
          this.initData()
          this.rechargeDialog = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
